通过 Webpack 的 compiler 对象的 Hooks 学会编写 Webpack 插件的编写 |
您所在的位置：网站首页 › webpack 用法 › 通过 Webpack 的 compiler 对象的 Hooks 学会编写 Webpack 插件的编写 |
|
webpack 的 Hooks Webpack 的 Compiler 对象主要有以下 Hooks： entryOptionwebpack 处理完 entry 配置项后触发，这是一个同步串行的 SyncBailHook 钩子，只要监听函数有一个函数的返回值不为undefined，则直接跳过剩下逻辑 无参数 afterPlugins处理完初始化插件后触发，这是一个同步的 SyncHook 钩子，不关心返回值 参数是 compiler 对象 afterResolversResolve 安装完成后触发，这是一个同步的 SyncHook 钩子 参数是 compiler 对象 environmentenvironment 准备好后触发，这是一个 SyncHook 钩子 无参数 afterEnvironmentenvironment 安装完成后触发，这是一个 SyncHook 钩子 beforeRuncompiler.run 函数之前触发，这是一个异步串行 AsyncSeriesHook 钩子 参数是 compiler run开始读取 records 之前触发，这是一个异步串行 AsyncSeriesHook 钩子 参数是 compiler watchRun监听模式下，一个新的编译开始之前触发，这是一个异步串行的 AsyncSeriesHook 钩子 参数是 compiler normalModuleFactorynormalModuleFactory 创建之后触发，这是一个同步 SyncHook 钩子 参数是 normalModuleFactory contextModuleFactorycontextModuleFactory 创建之后触发， 参数是 contextModuleFactory beforeCompile编译参数创建之后触发，这是一个异步串行 AsyncSeriesHook 钩子 参数是 compilationParams compile一个新的编译创建之后触发，这是一个同步 SyncHook 钩子 参数是 compilationParams thisCompilation触发 compilation 之前触发，这个是一个同步 SyncHook 钩子 参数是 compilation compilation编译创建之后执行，这是一个同步 SyncHook 钩子 参数是 compilation make这是一个异步并发 AsyncParallelBailHook 钩子 参数是 compilation afterCompile这是一个异步串行 �AsyncSeriesHook 钩子 参数是 compilation shouldEmit这是一个 SyncBailHook 钩子 参数是 compilation emit�生成资源到 output 目录之前�触发，这是一个异步串行 AsyncSeriesHook 钩子 参数是 compilation afterEmit生成资源到 output �目录之后，这是一个异步串行 AsyncSeriesHook 钩子 参数是 compilation done编译完成后触发，这是一个异步串行 AsyncSeriesHook 钩子 参数是 stats failed编译失败触发，这是一个同步 SyncHook 钩子 参数是 error invalid监听模式下，编译无效时触发，这是一个同步 SyncHook 钩子 参数是 fileName，changeTime �+ watchClose 监听模式停止，一个同步 SyncHook 钩子 插件编写实例webpack-clear-console通过实例学习是最快的，让我们看一个最简单的例子，webpack-clear-console，这个插件是去除输出里的 console 调用，里面插件的写法是 webpack4 之前的写法，不过基本上是一致的，通过源码可以看到插件在 emit 这个钩子上（生成资源到output目录之前）触发，通过 compilation 对象的 assets 对象的 source 方法获取文件内容，然后进行正则匹配。 最后需要将 source 和 size 的变动归回原来的 compilation 对象中，否则这些变动是不会生效的 island-webpack-pluginisland-webpack-plugin 是一个在 bundle 中添加作者信息的插件，这个插件同样是在 emit 这个钩子上触发的，同样是获取 source 后对 source 添加作者信息的字符串。 emit 是一个异步的钩子，可以使用 promise 的 如下，可以使用 promise 对上面的插件进行简单改造，以 island-webpack-plugin 为例，改造如下： class AuthorPlugin { constructor(options) { this.options = options; } apply(compiler) { compiler.hooks.emit.tap('author-plugin', (compilation) => { const options = this.options return new Promise((resolve, reject) => { const assets = compilation.assets Object.keys(assets).forEach(e => { let source = assets[e].source() let info = [] if (options.author) info.push(`@Author: ${options.author}`) if (options.email) info.push(`@Email: ${options.email}`) if (options.homepage) info.push(`@Homepage: ${options.homepage}`) if (info.length) { info.push(`@Date: ${new Date()}`) source = `/*\n ${info.join('\n\n ')}\n*/\n${source}` } compilation.assets[e].source = () => source compilation.assets[e].size = () => source.size }) resolve() }) }) } } module.exports = AuthorPlugin |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |